<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>图片图层demo</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://webapi.amap.com/maps?v=1.4.10&key=您申请的key值"></script>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="info">
    <h4>地图限制区域信息</h4>
    <p>NorthEast坐标：<span id="ne" class="lnglat"></span></p>
    <p>SouthWest坐标：<span id="sw" class="lnglat"></span></p>
</div>
<div class="input-card" style="width:14rem;">
    <h4>限制地图显示范围</h4>
    <div class="input-item">
        <button class="btn" id="lock-bounds">限定地图显示范围</button>
    </div>
    <div class="input-item">
        <button class="btn" id="unlock-bounds">取消地图显示限制</button>
    </div>
</div>
<script>
     // 自定义图片覆盖物
    var imageLayer = new AMap.ImageLayer({
        url: './image/drawing.jpg',
         // 平面图显示的坐标位置 顶点与顶点之间 成四边形
        bounds: new AMap.Bounds(
            [116.327911, 39.939229],
            [116.342659, 39.946275]
        ),
        // 图片显示的地图级别
        zooms: [15, 18]
    });

     // 实例化地图
    var map = new AMap.Map('container', {
        // 是否监控地图容器尺寸变化，默认值为false
        resizeEnable: true,
        // 地图中心点坐标值
        center: [116.33719, 39.942384],
        // 地图默认显示的缩放级别
        zoom: 16,
        showLabel: false, //不显示地图文字标记
        // 地图图层数组，数组可以是图层 中的一个或多个，默认为普通二维地图。当叠加多个图层时，普通二维地图需通过实例化一个TileLayer类实现
        layers: [
           // new AMap.TileLayer(),
            imageLayer
        ]
    });
    var x = 10;
    var y = 20;
    var markers = [];

initMarkers()
function initMarkers(){
    var positions = [[116.338911, 39.941229], [116.337911, 39.940229], [116.337211, 39.940229], [116.330951, 39.942029],
        [116.330911, 39.940020]];
    if(markers.length >= 0){
        map.remove(markers)
    }
   
    for (var i = 0, marker; i < positions.length; i++) {
        // 实例化Marker
        marker = new AMap.Marker({
            // 要显示该marker的地图对象
            map: map,
            // 点标记在地图上显示的位置，默认为地图中心点
            position: positions[i],
            // 点标记是否可点击
            clickable:true,
        });
        // 自定义属性
        marker.content = '我是第' + (i + 1) + '个Marker';
        // 监听鼠标左键单击事件
        marker.on('click', markerClick);
        markers.push(marker);
    }
}
    
     // marker点击事件
    function markerClick(e) {
        alert(e.target.content)
        console.log(e)
    }



    function logMapInfo() {
        // 获取Map的限制区域
        var limitBounds = map.getLimitBounds();
        if (limitBounds) {
            document.querySelector("#ne").innerText = limitBounds.northeast.toString();
            document.querySelector("#sw").innerText = limitBounds.southwest.toString();
        } else {
            document.querySelector("#ne").innerText = document.querySelector("#sw").innerText = "未限定";
        }
    }

    //限制地图显示范围
    function lockMapBounds() {
        // 获取当前地图视图范围，获取当前可视区域。
        var bounds = map.getBounds();
        // 设置Map的限制区域，设定区域限制后，传入参数为限制的Bounds。地图仅在区域内可拖拽
        map.setLimitBounds(bounds);
        logMapInfo();
    }

    //取消地图显示限制
    function unlockMapBounds() {
        map.clearLimitBounds();
        logMapInfo();
    }


    //启用地图范围限定
    lockMapBounds();
    logMapInfo();

    //绑定按钮事件
    document.querySelector("#lock-bounds").onclick = lockMapBounds;
    document.querySelector("#unlock-bounds").onclick = unlockMapBounds;
</script>
</body>
</html>
